<template>
	<div class="product-list">
		<!--搜索表单-->
		<div class="common-seach-wrap">
			

			<el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">
				<el-form-item label="接龙名称">
					<el-input size="small" clearable v-model="searchForm.tuan_name"  placeholder="请输入接龙名称"></el-input>
				</el-form-item>

				<el-form-item label="分销状态">
					<el-select size="small" clearable v-model="searchForm.share_status" placeholder="请选择" >
						<el-option label="全部" :value="0"></el-option>
						<el-option :label="i.label" :value="i.value" v-for="(i,index) in publishStatusOptions" :key="index"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item>
					<el-button size="small" type="primary" icon="Search" @click="onSubmit">查询</el-button>
				</el-form-item>
			</el-form>
		</div>

		<div class="product-content">
			<div class="table-wrap">
				<el-table ref="table" size="small" :data="tableData" border style="width: 100%" v-loading="loading"
				>
					<el-table-column type="index"  width="50" label="序号" align="center"  />
					<el-table-column prop="tuan_name" label="接龙名称" align="center"></el-table-column>
					<el-table-column prop="img" label="接龙主图" align="center">
						<template #default="scope">
							<img :src="scope.row.tuan_img" style="width: 50px; height:50px;margin:auto">
						</template>
					</el-table-column>
					<el-table-column prop="create_time" label="推送分销商" align="center">
						<template #default="scope">
							<div style="display: flex;align-items: center;justify-content: center;">
								<img v-if="scope.row.share_supplier_logo" :src="scope.row.share_supplier_logo" style="display:inline-block;width: 40px; height:40px;margin:0 10px"><span>{{scope.row.share_supplier_name}}<span v-if="scope.row.receive_supplier_remark"> ({{ scope.row.receive_supplier_remark }})</span></span>
							</div>
							
						</template>
					</el-table-column>
					<el-table-column prop="create_time" label="分销状态" align="center">
						<template #default="scope">
							<span>{{scope.row.share_status.text}}</span>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作" align="center" width="270">
						<template #default="scope" >
							<div>
								<!-- <el-button @click="editClick(scope.row)" link type="primary" size="small"
									>查看</el-button> -->
								<el-button @click="copyTuan(scope.row)" link type="primary" size="small"
									>复刻</el-button>
								<el-button @click="delClick(scope.row)" link type="danger" size="small"
									>删除</el-button>
								<el-button v-if="scope.row.share_status.text == '已接受'" @click="goOrder(scope.row)" link type="primary" size="small"
									>查看订单</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<!--分页-->
		<div class="pagination">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
				:current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper"
				:total="totalDataNumber"></el-pagination>
		</div>

		<el-drawer v-model="isOrderShow" title="订单" class="drawer-view" size="90%" :before-close="closeDrawer" >
			<!--搜索表单-->
			<div class="common-seach-wrap">
				<el-form size="small" :inline="true" :model="orderForm" class="demo-form-inline">
					<el-form-item label="接龙编号">
						<el-input v-model="orderForm.tuan_no" placeholder="请输入接龙编号" clearable></el-input>
					</el-form-item>
					<el-form-item label="订单号">
						<el-input size="small" v-model="orderForm.order_no" placeholder="请输入订单号"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button size="small" type="primary" icon="Search" @click="orderSearch">查询</el-button>
					</el-form-item>
					<!--<el-form-item>
					 <el-button size="small" type="success" @click="onExport"
							>导出分层表</el-button>
					</el-form-item>
					<el-form-item>
						<el-button size="small" type="success" @click="onExportProduct"
							>导出汇总表</el-button>
					</el-form-item> -->
				</el-form>
			</div>
			<!-- <el-tabs v-model="orderForm.dataType" @tab-change="handleClick">
					<el-tab-pane label="全部订单" name="all">
						<template #label>
							<span>全部订单</span>
						</template>
					</el-tab-pane>
					<el-tab-pane :label="'未付款'" name="payment">
						<template #label>
							<span>未付款
								</span>
						</template>
					</el-tab-pane>
					<el-tab-pane :label="'待发货'" name="delivery">
						<template #label>
							<span>待发货
								</span>
						</template>
					</el-tab-pane>
					<el-tab-pane :label="'待收货'" name="received">
						<template #label>
							<span>待收货
								</span>
						</template>
					</el-tab-pane>
					<el-tab-pane :label="'待取消'" name="cancel">
						<template #label>
							<span>待取消
								</span>
						</template>
					</el-tab-pane>
					<el-tab-pane label="已完成" name="complete">
						<template #label>
							<span>已完成</span>
						</template>
					</el-tab-pane>
				</el-tabs> -->
			<el-table ref="tables" size="small" :data="orderTableData" border style="width: 100%" v-loading="orderLoading"
				>
				<el-table-column prop="order_no" label="订单信息" width="400">
						<template #default="{ row }">
							<div class="order-code" v-if="row.is_top_row">
								<span class="state-text" :class="{ 'state-text-red': row.order_source != 10 }">{{
									row.order_source_text }}</span>
								<span class="c_main">&nbsp;订单号：{{ row.order_no }}</span>
								<span class="pl16">下单时间：{{ row.create_time }}</span>
								<!--是否取消申请中-->
								<span class="pl16" v-if="row.order_status == 21">
									<el-tag effect="dark" size="mini">取消申请中</el-tag>
								</span>
							</div>
							<template v-else>
								<div class="product-info" style="display: flex;" v-for="(item, index) in row.product" :key="index">
									<div class="pic" style="flex-shrink: 0;">
										<img v-img-url="item.image.file_path" alt="" />
									</div>
									<div class="info">
										<div class="name gray3 product-name">
											<span>{{ item.product_name }}</span>
										</div>
										<div class="gray9" v-if="item.product_attr">
											{{ item.product_attr }}
										</div>
										<div class="orange" v-if="item.refund">
											{{ item.refund.type.text }}-{{ item.refund.status.text }}
										</div>
									</div>
									<div class="d-c-c d-c">
										<div class="orange">￥ {{ item.product_price }}</div>
										<div class="gray3">x{{ item.total_num }}</div>
										<!-- <div class="" style="display: flex; align-items: center;">
											<el-tooltip
												class="box-item"
												effect="dark"
												content="点击实际发货数量进行修改、修改后光标离开修改完成!"
												placement="top"
											>
												 <div class="numbers" @click="changeRealNumber(item)">实际发货数量：<span v-show="!item.isRealNumberShow" :class="item.realNumber==item.total_num?'':'red'">x{{ item.realNumber }}</span></div>
											</el-tooltip>
											
											<el-input @blur="item.isRealNumberShow = false" v-show="item.isRealNumberShow"  v-model="item.realNumber" style="width: 100px" placeholder="实际发货数量" />
										</div> -->
									</div>
								</div>
							</template>
						</template>
					</el-table-column>
					<el-table-column prop="pay_price" label="实付款">
						<template #default="{ row }">
							<div v-if="!row.is_top_row">
								<div class="orange" v-if="row.order_source != 70">
									{{ row.pay_price }}
								</div>
								<p class="orange" v-if="row.order_source == 70">
									定金：{{ row.advance.pay_price }}
								</p>
								<p class="orange" v-if="row.order_source == 70">
									尾款：{{ row.pay_price }}
								</p>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="" label="买家">
						<template #default="{ row }">
							<div v-if="!row.is_top_row">
								<div>姓名：{{ row.user.nickName }}</div>
								<div>电话：{{ row.user.mobile }}</div>
								<div >ID：({{ row.user.user_id }})</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="state_text" label="交易状态">
						<template #default="{ row }">
							<span v-if="!row.is_top_row">{{ row.state_text }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="pay_type.text" label="支付方式">
						<template #default="{ row }">
							<span v-if="!row.is_top_row" class="gray9">{{
								row.pay_type.text
							}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="delivery_type.text" label="配送方式">
						<template #default="{ row }">
							<div v-if="!row.is_top_row">
								<span class="green">{{ row.delivery_type.text }}</span>
								<span v-if="row.delivery_type.value == 30">手机号:{{ row.user.mobile }}</span>
							</div>
						</template>
					</el-table-column>

					<el-table-column  label="地址">
						<template #default="{ row }">
							<div v-if="!row.is_top_row">
								<div >联系人：{{ row.addr.name }} </div>
								<div >联系方式：{{ row.addr.phone }} </div>
								<div >地址：{{ row.addr.zhou }} - {{ row.addr.qu }} - {{ row.addr.detail }}</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="结算状态">
						<template #default="{ row }">
							<span v-if="row.is_settled == 0">未结算</span>
							<span v-if="row.is_settled == 1" class="green">已结算</span>
						</template>
					</el-table-column>
			</el-table>

			<!--分页-->
			<div class="pagination">
				<el-pagination  @current-change="orderhandleCurrentChange" background
					:current-page="orderForm.page" :page-size="orderForm.list_rows" layout="total, prev, pager, next, jumper"
					:total="totalorderNumber"></el-pagination>
			</div>
		</el-drawer>
	</div>
</template>

<script>
import {
	distributor_follow,
	apiCopyTuan,
	distributor_follow_order,
} from "@/api/tuan.js";
import { useUserStore } from "@/store";
const { token } = useUserStore();

export default {
	components: {},
	data() {
		return {
			/*切换菜单*/
			activeName: "sell",
			/*切换选中值*/
			activeIndex: "0",
			/*是否正在加载*/
			loading: true,
			/*一页多少条*/
			pageSize: 10,
			/*一共多少条数据*/
			totalDataNumber: 0,
			/*当前是第几页*/
			curPage: 1,
			/*搜索参数*/
			searchForm: {
				tuan_name: "", //接龙名称
				share_status: '',   // 接龙发布状态
			},

			/*列表数据*/
			tableData: [],
			/*全部分类*/
			categoryList: [],
			supplier: [],
			/*统计数据*/
			product_count: {},
			// 列表选中项
			selectedRows: [],

			// 接龙订单状态
			orderStatusOptions: [
                { label: "下单中", value: 10 },
                { label: "待发货", value: 20 },
                { label: "已发货", value: 30 },
                { label: "已到货", value: 40 },
            ],
            // 接龙发布状态
            publishStatusOptions: [
                { label: "待接受", value: '待接受' },
                { label: "已接受", value: '已接受' },
            ],

			orderForm:{
				order_no:'',
				style_id:'',
				store_id:'',
				create_time:'',
				tuan_no:'',
				dataType:'all',
				page:1,
				list_rows: 10,
				token,
			},
			orderLoading: true,
			isOrderShow: false,
			orderTableData: [],
			totalorderNumber:0,
		};
	},
	created() {
		/*获取列表*/
		this.getList();
	},
	methods: {
		/*切换菜单*/
		handleClick(tab, event) {
			this.orderForm.page = 1;
			this.get_distributor_follow_order();
		},
		closeDrawer(){
			this.loading = false
			this.orderForm.page = 1
			this.totalorderNumber = 0
			this.isOrderShow = false
			this.orderTableData = []
		},
		goOrder(e){
			this.orderForm.tuan_no = e.tuan_no // e.tuan_no'YFH20250629001'
			this.isOrderShow = true
			this.get_distributor_follow_order()
		},

		/*删除*/
		delClick: function (row) {
			let self = this;
			ElMessageBox.confirm('确定删除该接龙么？', "提示", {
				type: "warning",
			}).then(() => {
				self.delTuan(row)
			});
		},

		// 删除接龙
		async delTuan(row) {
			let params = {
				share_id: row.share_id
			}
			this.loading = true;
			let data = await apiDelTuan(params);
			if (data.code == 1) {
				this.page = 1
				this.getList()
			} else { 
				ElMessage.error(data.msg);
			}
		},

		//复刻接龙
		async copyTuan(row) {
			console.log(row.id)
			let params = {
				tuan_id:row.tuan_id
			}
			let data = await apiCopyTuan(params);
			if (data.code == 1) {
				ElMessage.success('复刻成功，请前往我的接龙查看!');
			} else {
				ElMessage.error(data.msg);
			}
		},

		// 获取列表
		async getList() {
			let params = {
				page: this.curPage,
				list_rows: this.pageSize,
				...this.searchForm
			}
			this.loading = true;
			let data = await distributor_follow(params);
			if (data.code == 1) {
				console.log(data.data)
				this.loading = false;
				this.tableData = data.data
				this.totalDataNumber = data.data.length;
			} else {
				ElMessage.error(data.msg);
			}
		},


		// 获取列表
		async get_distributor_follow_order() {
			let params = {
				
				...this.orderForm
			}
			this.loading = true;
			let data = await distributor_follow_order(params);
			console.log(data)
			if (data.code == 1) {
				console.log(data.data)
				this.orderLoading = false;
				let list = []
				for (let i = 0; i < data.data.list.data.length; i++) {
					let item = data.data.list.data[i];
					item.product.forEach( e => {
						e.realNumber = e.total_num
						e.isRealNumberShow = false
					});

					let topitem = {
						order_no: item.order_no,
						create_time: item.create_time,
						order_source: item.order_source,
						order_source_text: item.order_source_text,
						order_status: item.order_status.value,
						is_top_row: true,
					};
					list.push(topitem);
					list.push(item);
				}


				this.orderTableData = list
				this.totalorderNumber = data.data.list.total;
			} else {
				ElMessage.error(data.msg);
			}
		},

		onExport: function () {
			if(this.orderTableData.length == 0){
				ElMessage({
					message: "该接龙暂无订单，无法导出分层表",
					type: "error",
				});
				return
			}
			let url = "/index.php/supplier/order.operate/export";
			let params = this.orderForm;
			delete params.list_rows
			delete params.page
			this.$filter.onExportFunc(url, params);
		},

		onExportProduct: function (){
			if(this.orderTableData.length == 0){
				ElMessage({
					message: "该接龙暂无订单，无法导出汇总表",
					type: "error",
				});
				return
			}
			let url = "/index.php/supplier/order.operate/exportProduct";
			let params = this.orderForm;
			delete params.list_rows
			delete params.page
			console.log(params)
			this.$filter.onExportFunc(url, params);
		},




		/*选择第几页*/
		handleCurrentChange(val) {
			let self = this;
			self.loading = true;
			self.curPage = val;
			self.getList();
		},

		/*每页多少条*/
		handleSizeChange(val) {
			this.pageSize = val;
			this.getList();
		},

		orderhandleCurrentChange(val){
			this.orderLoading = true;
			this.orderForm.page = val;
			this.get_distributor_follow_order()
		},

		orderSearch(){
			this.orderLoading = true;
			this.orderForm.page = 1;
			this.get_distributor_follow_order()
		},


		/*搜索查询*/
		onSubmit() {
			this.curPage = 1;
			this.getList();
		},
	},
};
</script>

<style>
.head-part {
	display: flex;
	align-items: center;
}

.el-form-item--small .el-form-item__content {
    line-height: 1 !important;
}
</style>

<style lang="scss">
.red {
	color :red;
}

.numbers {
	cursor: pointer;
}


.product-info {
	padding: 10px 0;
	border-top: 1px solid #eeeeee;
}

.order-code .state-text {
	padding: 2px 4px;
	border-radius: 4px;
	background: #808080;
	color: #ffffff;
}

.order-code .state-text-red {
	background: red;
}

.product-info:first-of-type {
	border-top: none;
}

.el-table__body tbody .el-table__row:nth-child(odd) {
	background: #f5f7fa;
}

.pic {
	position: relative;
	width: 60px;
	height: 60px;
	background: #F0F0EE;
	overflow: hidden;
}

.pic>img  {
	width: 100%;
}
</style>
